{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## flowchart\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/flowchart.html) \n",
    "\n",
    "```mermaid\n",
    "%%{init: {\"flowchart\": {\"htmlLabels\": false}} }%%\n",
    "flowchart LR\n",
    "    markdown[\"`This **is** _Markdown_`\"]\n",
    "    newLines[\"`Line1\n",
    "    Line 2\n",
    "    Line 3`\"]\n",
    "    markdown --> newLines\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## sequence\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/sequenceDiagram.html)\n",
    "\n",
    "```mermaid\n",
    "sequenceDiagram\n",
    "    Alice->John: Hello John, how are you?\n",
    "    Note over Alice,John: A typical interaction<br/>But now in two lines\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## class\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/classDiagram.html)\n",
    "\n",
    "```mermaid\n",
    "---\n",
    "title: Animal example\n",
    "---\n",
    "classDiagram\n",
    "    note \"From Duck till Zebra\"\n",
    "    Animal <|-- Duck\n",
    "    note for Duck \"can fly\\ncan swim\\ncan dive\\ncan help in debugging\"\n",
    "    Animal <|-- Fish\n",
    "    Animal <|-- Zebra\n",
    "    Animal : +int age\n",
    "    Animal : +String gender\n",
    "    Animal: +isMammal()\n",
    "    Animal: +mate()\n",
    "    class Duck{\n",
    "        +String beakColor\n",
    "        +swim()\n",
    "        +quack()\n",
    "    }\n",
    "    class Fish{\n",
    "        -int sizeInFeet\n",
    "        -canEat()\n",
    "    }\n",
    "    class Zebra{\n",
    "        +bool is_wild\n",
    "        +run()\n",
    "    }\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## state\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/stateDiagram.html)\n",
    "\n",
    "```mermaid\n",
    " stateDiagram-v2\n",
    "        State1: The state with a note\n",
    "        note right of State1\n",
    "            Important information! You can write\n",
    "            notes.\n",
    "        end note\n",
    "        State1 --> State2\n",
    "        note left of State2 : This is the note to the left.\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## er\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)\n",
    "\n",
    "```mermaid\n",
    "erDiagram\n",
    "    CAR ||--o{ NAMED-DRIVER : allows\n",
    "    CAR {\n",
    "        string registrationNumber PK\n",
    "        string make\n",
    "        string model\n",
    "        string[] parts\n",
    "    }\n",
    "    PERSON ||--o{ NAMED-DRIVER : is\n",
    "    PERSON {\n",
    "        string driversLicense PK \"The license #\"\n",
    "        string(99) firstName \"Only 99 characters are allowed\"\n",
    "        string lastName\n",
    "        string phone UK\n",
    "        int age\n",
    "    }\n",
    "    NAMED-DRIVER {\n",
    "        string carRegistrationNumber PK, FK\n",
    "        string driverLicence PK, FK\n",
    "    }\n",
    "    MANUFACTURER only one to zero or more CAR : makes\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## journey\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/userJourney.html)\n",
    "\n",
    "```mermaid\n",
    "journey\n",
    "    title My working day\n",
    "    section Go to work\n",
    "      Make tea: 5: Me\n",
    "      Go upstairs: 3: Me\n",
    "      Do work: 1: Me, Cat\n",
    "    section Go home\n",
    "      Go downstairs: 5: Me\n",
    "      Sit down: 5: Me\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## gantt\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/gantt.html)\n",
    "\n",
    "```mermaid\n",
    "gantt\n",
    "    dateFormat  YYYY-MM-DD\n",
    "    title       Adding GANTT diagram functionality to mermaid\n",
    "    excludes    weekends\n",
    "    %% (`excludes` accepts specific dates in YYYY-MM-DD format, days of the week (\"sunday\") or \"weekends\", but not the word \"weekdays\".)\n",
    "\n",
    "    section A section\n",
    "    Completed task            :done,    des1, 2014-01-06,2014-01-08\n",
    "    Active task               :active,  des2, 2014-01-09, 3d\n",
    "    Future task               :         des3, after des2, 5d\n",
    "    Future task2              :         des4, after des3, 5d\n",
    "\n",
    "    section Critical tasks\n",
    "    Completed task in the critical line :crit, done, 2014-01-06,24h\n",
    "    Implement parser and jison          :crit, done, after des1, 2d\n",
    "    Create tests for parser             :crit, active, 3d\n",
    "    Future task in critical line        :crit, 5d\n",
    "    Create tests for renderer           :2d\n",
    "    Add to mermaid                      :1d\n",
    "    Functionality added                 :milestone, 2014-01-25, 0d\n",
    "\n",
    "    section Documentation\n",
    "    Describe gantt syntax               :active, a1, after des1, 3d\n",
    "    Add gantt diagram to demo page      :after a1  , 20h\n",
    "    Add another diagram to demo page    :doc1, after a1  , 48h\n",
    "\n",
    "    section Last section\n",
    "    Describe gantt syntax               :after doc1, 3d\n",
    "    Add gantt diagram to demo page      :20h\n",
    "    Add another diagram to demo page    :48h\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## pie\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/pie.html)\n",
    "\n",
    "```mermaid\n",
    "%%{init: {\"pie\": {\"textPosition\": 0.5}, \"themeVariables\": {\"pieOuterStrokeWidth\": \"5px\"}} }%%\n",
    "pie showData\n",
    "    title Key elements in Product X\n",
    "    \"Calcium\" : 42.96\n",
    "    \"Potassium\" : 50.05\n",
    "    \"Magnesium\" : 10.01\n",
    "    \"Iron\" :  5\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## quadrant\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/quadrantChart.html)\n",
    "\n",
    "```mermaid\n",
    "%%{init: {\"quadrantChart\": {\"chartWidth\": 400, \"chartHeight\": 400}, \"themeVariables\": {\"quadrant1TextFill\": \"#ff0000\"} }}%%\n",
    "quadrantChart\n",
    "  x-axis Urgent --> Not Urgent\n",
    "  y-axis Not Important --> \"Important ❤\"\n",
    "  quadrant-1 Plan\n",
    "  quadrant-2 Do\n",
    "  quadrant-3 Delegate\n",
    "  quadrant-4 Delete\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## requirement\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/requirementDiagram.html)\n",
    "> \n",
    "> note: some long text also overflows the box upstream\n",
    "\n",
    "```mermaid\n",
    "requirementDiagram\n",
    "    requirement test_req {\n",
    "    id: 1\n",
    "    text: the test text.\n",
    "    risk: high\n",
    "    verifymethod: test\n",
    "    }\n",
    "\n",
    "    functionalRequirement test_req2 {\n",
    "    id: 1.1\n",
    "    text: the second test text.\n",
    "    risk: low\n",
    "    verifymethod: inspection\n",
    "    }\n",
    "\n",
    "    performanceRequirement test_req3 {\n",
    "    id: 1.2\n",
    "    text: the third test text.\n",
    "    risk: medium\n",
    "    verifymethod: demonstration\n",
    "    }\n",
    "\n",
    "    interfaceRequirement test_req4 {\n",
    "    id: 1.2.1\n",
    "    text: the fourth test text.\n",
    "    risk: medium\n",
    "    verifymethod: analysis\n",
    "    }\n",
    "\n",
    "    physicalRequirement test_req5 {\n",
    "    id: 1.2.2\n",
    "    text: the fifth test text.\n",
    "    risk: medium\n",
    "    verifymethod: analysis\n",
    "    }\n",
    "\n",
    "    designConstraint test_req6 {\n",
    "    id: 1.2.3\n",
    "    text: the sixth test text.\n",
    "    risk: medium\n",
    "    verifymethod: analysis\n",
    "    }\n",
    "\n",
    "    element test_entity {\n",
    "    type: simulation\n",
    "    }\n",
    "\n",
    "    element test_entity2 {\n",
    "    type: word doc\n",
    "    docRef: reqs/test_entity\n",
    "    }\n",
    "\n",
    "    element test_entity3 {\n",
    "    type: \"test suite\"\n",
    "    docRef: github.com/all_the_tests\n",
    "    }\n",
    "\n",
    "\n",
    "    test_entity - satisfies -> test_req2\n",
    "    test_req - traces -> test_req2\n",
    "    test_req - contains -> test_req3\n",
    "    test_req3 - contains -> test_req4\n",
    "    test_req4 - derives -> test_req5\n",
    "    test_req5 - refines -> test_req6\n",
    "    test_entity3 - verifies -> test_req5\n",
    "    test_req <- copies - test_entity2\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## c4\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/c4.html)\n",
    "\n",
    "```mermaid\n",
    " C4Context\n",
    "      title System Context diagram for Internet Banking System\n",
    "      Enterprise_Boundary(b0, \"BankBoundary0\") {\n",
    "        Person(customerA, \"Banking Customer A\", \"A customer of the bank, with personal bank accounts.\")\n",
    "        Person(customerB, \"Banking Customer B\")\n",
    "        Person_Ext(customerC, \"Banking Customer C\", \"desc\")\n",
    "\n",
    "        Person(customerD, \"Banking Customer D\", \"A customer of the bank, <br/> with personal bank accounts.\")\n",
    "\n",
    "        System(SystemAA, \"Internet Banking System\", \"Allows customers to view information about their bank accounts, and make payments.\")\n",
    "\n",
    "        Enterprise_Boundary(b1, \"BankBoundary\") {\n",
    "\n",
    "          SystemDb_Ext(SystemE, \"Mainframe Banking System\", \"Stores all of the core banking information about customers, accounts, transactions, etc.\")\n",
    "\n",
    "          System_Boundary(b2, \"BankBoundary2\") {\n",
    "            System(SystemA, \"Banking System A\")\n",
    "            System(SystemB, \"Banking System B\", \"A system of the bank, with personal bank accounts. next line.\")\n",
    "          }\n",
    "\n",
    "          System_Ext(SystemC, \"E-mail system\", \"The internal Microsoft Exchange e-mail system.\")\n",
    "          SystemDb(SystemD, \"Banking System D Database\", \"A system of the bank, with personal bank accounts.\")\n",
    "\n",
    "          Boundary(b3, \"BankBoundary3\", \"boundary\") {\n",
    "            SystemQueue(SystemF, \"Banking System F Queue\", \"A system of the bank.\")\n",
    "            SystemQueue_Ext(SystemG, \"Banking System G Queue\", \"A system of the bank, with personal bank accounts.\")\n",
    "          }\n",
    "        }\n",
    "      }\n",
    "\n",
    "      BiRel(customerA, SystemAA, \"Uses\")\n",
    "      BiRel(SystemAA, SystemE, \"Uses\")\n",
    "      Rel(SystemAA, SystemC, \"Sends e-mails\", \"SMTP\")\n",
    "      Rel(SystemC, customerA, \"Sends e-mails to\")\n",
    "\n",
    "      UpdateElementStyle(customerA, $fontColor=\"red\", $bgColor=\"grey\", $borderColor=\"red\")\n",
    "      UpdateRelStyle(customerA, SystemAA, $textColor=\"blue\", $lineColor=\"blue\", $offsetX=\"5\")\n",
    "      UpdateRelStyle(SystemAA, SystemE, $textColor=\"blue\", $lineColor=\"blue\", $offsetY=\"-10\")\n",
    "      UpdateRelStyle(SystemAA, SystemC, $textColor=\"blue\", $lineColor=\"blue\", $offsetY=\"-40\", $offsetX=\"-50\")\n",
    "      UpdateRelStyle(SystemC, customerA, $textColor=\"red\", $lineColor=\"red\", $offsetX=\"-50\", $offsetY=\"20\")\n",
    "\n",
    "      UpdateLayoutConfig($c4ShapeInRow=\"3\", $c4BoundaryInRow=\"1\")\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## mindmap\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/mindmap.html)\n",
    ">\n",
    "> note: icons will not be available\n",
    "\n",
    "```mermaid\n",
    "mindmap\n",
    "  root((mindmap))\n",
    "    Origins\n",
    "      Long history\n",
    "      ::icon(fa fa-book)\n",
    "      Popularisation\n",
    "        British popular psychology author Tony Buzan\n",
    "    Research\n",
    "      On effectiveness<br/>and features\n",
    "      On Automatic creation\n",
    "        Uses\n",
    "            Creative techniques\n",
    "            Strategic planning\n",
    "            Argument mapping\n",
    "    Tools\n",
    "      Pen and paper\n",
    "      Mermaid\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## timeline\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/timeline.html)\n",
    "\n",
    "```mermaid\n",
    "timeline\n",
    "        title England's History Timeline\n",
    "        section Stone Age\n",
    "          7600 BC : Britain's oldest known house was built in Orkney, Scotland\n",
    "          6000 BC : Sea levels rise and Britain becomes an island.<br> The people who live here are hunter-gatherers.\n",
    "        section Bronze Age\n",
    "          2300 BC : People arrive from Europe and settle in Britain. <br>They bring farming and metalworking.\n",
    "                  : New styles of pottery and ways of burying the dead appear.\n",
    "          2200 BC : The last major building works are completed at Stonehenge.<br> People now bury their dead in stone circles.\n",
    "                  : The first metal objects are made in Britain.Some other nice things happen. it is a good time to be alive.\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## sankey\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/sankey.html)\n",
    "\n",
    "```mermaid\n",
    "---\n",
    "config:\n",
    "  sankey:\n",
    "    showValues: false\n",
    "---\n",
    "sankey\n",
    "\n",
    "Agricultural 'waste',Bio-conversion,124.729\n",
    "Bio-conversion,Liquid,0.597\n",
    "Bio-conversion,Losses,26.862\n",
    "Bio-conversion,Solid,280.322\n",
    "Bio-conversion,Gas,81.144\n",
    "Biofuel imports,Liquid,35\n",
    "Biomass imports,Solid,35\n",
    "Coal imports,Coal,11.606\n",
    "Coal reserves,Coal,63.965\n",
    "Coal,Solid,75.571\n",
    "District heating,Industry,10.639\n",
    "District heating,Heating and cooling - commercial,22.505\n",
    "District heating,Heating and cooling - homes,46.184\n",
    "Electricity grid,Over generation / exports,104.453\n",
    "Electricity grid,Heating and cooling - homes,113.726\n",
    "Electricity grid,H2 conversion,27.14\n",
    "Electricity grid,Industry,342.165\n",
    "Electricity grid,Road transport,37.797\n",
    "Electricity grid,Agriculture,4.412\n",
    "Electricity grid,Heating and cooling - commercial,40.858\n",
    "Electricity grid,Losses,56.691\n",
    "Electricity grid,Rail transport,7.863\n",
    "Electricity grid,Lighting & appliances - commercial,90.008\n",
    "Electricity grid,Lighting & appliances - homes,93.494\n",
    "Gas imports,Ngas,40.719\n",
    "Gas reserves,Ngas,82.233\n",
    "Gas,Heating and cooling - commercial,0.129\n",
    "Gas,Losses,1.401\n",
    "Gas,Thermal generation,151.891\n",
    "Gas,Agriculture,2.096\n",
    "Gas,Industry,48.58\n",
    "Geothermal,Electricity grid,7.013\n",
    "H2 conversion,H2,20.897\n",
    "H2 conversion,Losses,6.242\n",
    "H2,Road transport,20.897\n",
    "Hydro,Electricity grid,6.995\n",
    "Liquid,Industry,121.066\n",
    "Liquid,International shipping,128.69\n",
    "Liquid,Road transport,135.835\n",
    "Liquid,Domestic aviation,14.458\n",
    "Liquid,International aviation,206.267\n",
    "Liquid,Agriculture,3.64\n",
    "Liquid,National navigation,33.218\n",
    "Liquid,Rail transport,4.413\n",
    "Marine algae,Bio-conversion,4.375\n",
    "Ngas,Gas,122.952\n",
    "Nuclear,Thermal generation,839.978\n",
    "Oil imports,Oil,504.287\n",
    "Oil reserves,Oil,107.703\n",
    "Oil,Liquid,611.99\n",
    "Other waste,Solid,56.587\n",
    "Other waste,Bio-conversion,77.81\n",
    "Pumped heat,Heating and cooling - homes,193.026\n",
    "Pumped heat,Heating and cooling - commercial,70.672\n",
    "Solar PV,Electricity grid,59.901\n",
    "Solar Thermal,Heating and cooling - homes,19.263\n",
    "Solar,Solar Thermal,19.263\n",
    "Solar,Solar PV,59.901\n",
    "Solid,Agriculture,0.882\n",
    "Solid,Thermal generation,400.12\n",
    "Solid,Industry,46.477\n",
    "Thermal generation,Electricity grid,525.531\n",
    "Thermal generation,Losses,787.129\n",
    "Thermal generation,District heating,79.329\n",
    "Tidal,Electricity grid,9.452\n",
    "UK land based bioenergy,Bio-conversion,182.01\n",
    "Wave,Electricity grid,19.013\n",
    "Wind,Electricity grid,289.366\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## xy\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/xyChart.html)\n",
    "\n",
    "```mermaid\n",
    "xychart\n",
    "    title \"Sales Revenue\"\n",
    "    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]\n",
    "    y-axis \"Revenue (in $)\" 4000 --> 11000\n",
    "    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n",
    "    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## block\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/block.html)\n",
    "\n",
    "```mermaid\n",
    "block\n",
    "columns 1\n",
    "  db((\"DB\"))\n",
    "  blockArrowId6<[\"&nbsp;&nbsp;&nbsp;\"]>(down)\n",
    "  block:ID\n",
    "    A\n",
    "    B[\"A wide one in the middle\"]\n",
    "    C\n",
    "  end\n",
    "  space\n",
    "  D\n",
    "  ID --> D\n",
    "  C --> D\n",
    "  style B fill:#969,stroke:#333,stroke-width:4px\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## kanban\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/kanban.html)\n",
    "\n",
    "```mermaid\n",
    "---\n",
    "config:\n",
    "  kanban:\n",
    "    ticketBaseUrl: 'https://mermaidchart.atlassian.net/browse/#TICKET#'\n",
    "---\n",
    "kanban\n",
    "  Todo\n",
    "    [Create Documentation]\n",
    "    docs[Create Blog about the new diagram]\n",
    "  [In progress]\n",
    "    id6[Create renderer so that it works in all cases. We also add som extra text here for testing purposes. And some more just for the extra flare.]\n",
    "  id9[Ready for deploy]\n",
    "    id8[Design grammar]@{ assigned: 'knsv' }\n",
    "  id10[Ready for test]\n",
    "    id4[Create parsing tests]@{ ticket: MC-2038, assigned: 'K.Sveidqvist', priority: 'High' }\n",
    "    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }\n",
    "  id11[Done]\n",
    "    id5[define getData]\n",
    "    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: MC-2036, priority: 'Very High'}\n",
    "    id3[Update DB function]@{ ticket: MC-2037, assigned: knsv, priority: 'High' }\n",
    "\n",
    "  id12[Can't reproduce]\n",
    "    id3[Weird flickering in Firefox]\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## flowchart-elk\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/flowchart.html#renderer)\n",
    "\n",
    "```mermaid\n",
    "%%{\n",
    "init: {\"flowchart\":\n",
    "{\"defaultRenderer\": \n",
    "\"elk\"}} \n",
    "}%%\n",
    "flowchart LR\n",
    "    a --> b --> c --> d --> e --> f --> g --> h --> i --> j --> k --> l --> m --> n --> o --> p --> q --> r --> s --> t --> u --> v --> w --> x --> y --> z\n",
    "    subgraph Vowels\n",
    "        a\n",
    "        e\n",
    "        i\n",
    "        o\n",
    "        u\n",
    "        y\n",
    "    end\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## architecture\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/architecture.html)\n",
    "\n",
    "```mermaid\n",
    "architecture-beta\n",
    "    group api(cloud)[API]\n",
    "\n",
    "    service db(database)[Database] in api\n",
    "    service disk1(disk)[Storage] in api\n",
    "    service disk2(disk)[Storage] in api\n",
    "    service server(server)[Server] in api\n",
    "\n",
    "    db:L -- R:server\n",
    "    disk1:T -- B:server\n",
    "    disk2:T -- B:db\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## packet\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/packet.html)\n",
    "\n",
    "```mermaid\n",
    "---\n",
    "title: \"TCP Packet\"\n",
    "---\n",
    "packet\n",
    "0-15: \"Source Port\"\n",
    "16-31: \"Destination Port\"\n",
    "32-63: \"Sequence Number\"\n",
    "64-95: \"Acknowledgment Number\"\n",
    "96-99: \"Data Offset\"\n",
    "100-105: \"Reserved\"\n",
    "106: \"URG\"\n",
    "107: \"ACK\"\n",
    "108: \"PSH\"\n",
    "109: \"RST\"\n",
    "110: \"SYN\"\n",
    "111: \"FIN\"\n",
    "112-127: \"Window\"\n",
    "128-143: \"Checksum\"\n",
    "144-159: \"Urgent Pointer\"\n",
    "160-191: \"(Options and Padding)\"\n",
    "192-255: \"Data (variable length)\"\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## radar\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/radar.html)\n",
    "\n",
    "```mermaid\n",
    "---\n",
    "title: \"Grades\"\n",
    "---\n",
    "radar-beta\n",
    "  axis m[\"Math\"], s[\"Science\"], e[\"English\"]\n",
    "  axis h[\"History\"], g[\"Geography\"], a[\"Art\"]\n",
    "  curve a[\"Alice\"]{85, 90, 80, 70, 75, 90}\n",
    "  curve b[\"Bob\"]{70, 75, 85, 80, 90, 85}\n",
    "\n",
    "  max 100\n",
    "  min 0\n",
    "```"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## treemap\n",
    "\n",
    "> [docs](https://mermaid.js.org/syntax/treemap.html)\n",
    "\n",
    "```mermaid\n",
    "treemap-beta\n",
    "\"Section 1\"\n",
    "    \"Leaf 1.1\": 12\n",
    "    \"Section 1.2\"\n",
    "      \"Leaf 1.2.1\": 12\n",
    "\"Section 2\"\n",
    "    \"Leaf 2.1\": 20\n",
    "    \"Leaf 2.2\": 25\n",
    "```"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.11"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}
